package com.example.app.pages.main.home.accountList

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.ListItemDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.res.fontResource
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.app.R
import com.example.app.components.MyDivider.MyDivider
import com.example.app.components.MyDivider.MyDividerDirection
import com.example.app.components.MyImage.MyFitImage
import com.example.app.components.MyListItem.MyListItem
import com.example.app.components.MySpacer.MySpacer
import com.example.app.components.MyText.MyText
import com.example.app.ui.theme.BebasNeueRegular
import com.example.app.ui.theme.middleSpacer
import com.example.app.ui.theme.smallSpacer

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AccountListTopImage(
        height: Dp,
        paddingValues: PaddingValues,
        pageAnimatedOffset: Dp
) {
    Column(
        modifier = Modifier
            .clip(RectangleShape)
            .height(height)
    ) {
        Box {
            MyFitImage(painterResourceId = R.drawable.bg4)
            MyListItem(
                colors = ListItemDefaults.colors(
                    containerColor = Color.Transparent
                ),
                myListItemWrapColumnBackgroundColor = Color.Transparent,
                headlineContent = {
                    Column {
                        MySpacer(
                            modifier = Modifier.height(
                                //状态栏高度 + 头部标题栏的高度
                                paddingValues.calculateTopPadding()
                                        + TopAppBarDefaults.TopAppBarExpandedHeight
                                        + pageAnimatedOffset
                            )
                        )
                        MyText(
                            text = "支出月预算超支",
                            style = MaterialTheme.typography.titleLarge.copy(color = MaterialTheme.colorScheme.onPrimary)
                        )
                        MySpacer(modifier = Modifier.height(smallSpacer))
                        MyText(
                            text = "14860.00",
                            style = MaterialTheme.typography.titleLarge.copy(color = MaterialTheme.colorScheme.onPrimary, fontSize = 35.sp, fontFamily = BebasNeueRegular)
                        )
                        MySpacer(modifier = Modifier.height(middleSpacer))
                        Row (
                            horizontalArrangement = Arrangement.Start,
                            verticalAlignment = Alignment.CenterVertically
                        ){
                            MyText(
                                text = "本月收入",
                                style = MaterialTheme.typography.titleSmall.copy(color = MaterialTheme.colorScheme.onPrimary)
                            )
                            MySpacer(modifier = Modifier.width(smallSpacer))
                            MyText(
                                text = "0.00",
                                style = MaterialTheme.typography.titleSmall.copy(color = MaterialTheme.colorScheme.onPrimary)
                            )
                            MySpacer(modifier = Modifier.width(smallSpacer))
                            MyDivider(
                                myDividerDirection = MyDividerDirection.VER,
                                modifier = Modifier
                                    .background(MaterialTheme.colorScheme.onPrimary)
                                    .height(16.dp)
                                    .width(2.dp)
                            )
                            MySpacer(modifier = Modifier.width(smallSpacer))
                            MyText(
                                text = "本月支出",
                                style = MaterialTheme.typography.titleSmall.copy(color = MaterialTheme.colorScheme.onPrimary)
                            )
                            MySpacer(modifier = Modifier.width(smallSpacer))
                            MyText(
                                text = "0.00",
                                style = MaterialTheme.typography.titleSmall.copy(color = MaterialTheme.colorScheme.onPrimary)
                            )
                        }
                    }
                })
        }
    }
}